<template>
  <div class="zz-image-button" @click="handleClick">
    <div class="icon-container">
      <!-- 支持Element Plus图标组件 -->
      <el-icon v-if="iconComponent" :size="iconSize">
        <component :is="iconComponent" />
      </el-icon>
      <!-- 支持字体图标类名 -->
      <span
        v-else-if="iconClass"
        :style="{ fontSize: iconSize + 'px' }"
        :class="['iconfont', iconClass]"
      />

      <!-- 默认图标 -->
      <el-icon v-else :size="iconSize">
        <Setting />
      </el-icon>
    </div>
    <div class="label">
      {{ label }}
    </div>
  </div>
</template>

<script setup>
import { Setting } from "@element-plus/icons-vue";

// 定义props
const props = defineProps({
  label: {
    type: String,
    required: true,
    default: "按钮",
  },
  iconComponent: {
    type: [String, Object],
    default: null,
    validator: (value) => {
      // 可以是字符串（组件名）或组件对象
      return (
        typeof value === "string" || typeof value === "object" || value === null
      );
    },
  },
  iconClass: {
    type: String,
    default: null,
  },
  iconSize: {
    type: [String, Number],
    default: 30,
  },
});

// 定义emits
const emit = defineEmits(["click"]);

// 点击处理函数
const handleClick = () => {
  emit("click", props.label);
};
</script>

<style lang="less" scoped>
.zz-image-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 20px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.3s ease;
  user-select: none;
  min-width: 80px;

  &:hover {
    // background-color: var(--el-fill-color-light);

    .icon-container {
      transform: scale(1.1);

      .icon {
        font-weight: bold;
      }

      .el-icon {
        font-weight: bold;
      }
    }

    .label {
      font-weight: bold;
      //   color: var(--el-color-primary);
    }
  }

  &:active {
    transform: scale(0.95);
  }

  .icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    transition: all 0.3s ease;

    .icon {
      font-size: 24px;
      color: var(--el-text-color-regular);
      transition: all 0.3s ease;
    }

    .el-icon {
      color: var(--el-text-color-regular);
      transition: all 0.3s ease;
    }
  }

  .label {
    font-size: 14px;
    color: var(--el-text-color-regular);
    text-align: center;
    line-height: 1.2;
    transition: all 0.3s ease;
    word-break: break-all;
  }
}
</style>
